前言

在今天的任務中，我將專注於處理待辦事項清單的JavaScript部分，讓整個待辦事項清單更具互動性。我今天的目標是實現以下功能：

• 動態添加待辦事項項目
• 刪除待辦事項項目

動態添加待辦事項項目

初始化元素

首先，我在 JavaScript 中初始化一些重要的 HTML 元素，以方便我之後的操作。HTML 元素包括待辦事項的表單、輸入框、新增按鈕以及顯示待辦事項的容器元素。

this.todoForm = this.getElement("#todoForm");
this.inputText = this.getElement("#inputText");
this.addItemButton = this.getElement("#addButton");
this.todoContainer = this.getElement(".todolist-container");

新增待辦事項表單事件

接下來，我為待辦事項的表單設置事件監聽器，用來捕捉表單提交事件。

this.todoForm.addEventListener("submit", (e) => {
    e.preventDefault(); // 防止頁面重新刷新

    let inputValue = this.inputText.value;
    this.createTodoItem(inputValue);
    this.todoForm.reset();
});

在上面的程式碼中，我執行了以下操作：

• 使用e.preventDefault()防止表單提交後刷新頁面
• 獲取輸入框的值，並將它儲存到inputValue中
• 調用createTodoItem(inputValue)方法創建待辦事項項目
• 最後，重新設置表單內容，以便輸入下一個待辦事項

這樣就可以避免每次按下新增按鈕，頁面就會重新刷新。

建構元素

接著，為了能動態生成待辦事項中的項目，我將會使用document.createElement()方法創建元素：

1. 創建一個<div>元素，並給它添加"todolist-item"類別，用於包覆待辦事項項目內容

const todoItemDiv = document.createElement("div");
todoItemDiv.classList.add("todolist-item");

2. 創建一個<input>元素，設置它的type、name和id屬性，這是一個用來顯示勾選狀態的checkbox

const checkboxInput = document.createElement("input");
checkboxInput.setAttribute("type", "checkbox");
checkboxInput.setAttribute("name", "checkbox");
checkboxInput.setAttribute("id", "checkbox");

3. 創建一個<p>元素，添加"text-area"類別，並設定文字內容為輸入框的內容

const textParagraph = document.createElement("p");
textParagraph.classList.add("text-area");
textParagraph.textContent = inputValue;

4. 創建一個<button>元素，添加"delete-button"類別，並設定文字內容為"x"，用於刪除該待辦事項項目。

const deleteButton = document.createElement("button");
deleteButton.classList.add("delete-button");
deleteButton.textContent = "\u00D7";

以上程式還有使用到兩個方法，它們的功用如下：

• class.add()是 JavaScript 中用來操作元素 class 屬性的方法，可以添加一個或多個 CSS 類別名稱
• setAttribute()是 JavaScript 中用來設置 HTML 元素的屬性的方法，可以將指定屬性設為特定的值

補充

• 為何不能在 JavaScript 中使用 "×" 表示 "x"?
  • 因為在 JavaScript 中 "×" 只是一個文字字串，不會被解析成 "x"，所以無法正確顯示出來
  • 而Unicode是一種字符編碼標準，它為每個字符分配唯一的編碼值。所以在 JavaScript 中，我可以使用"\u00D7" 來表示 "x"

添加元素到 todoContainer

appendChild()方法的功用是將括號內的元素添加到指定的父元素中。
再下面的程式中，我將checkboxInput、textParagraph和deleteButton添加到todoItemDiv這個父元素中。
然後再將整個todoItemDiv添加到todoContainer裡面。

todoItemDiv.appendChild(checkboxInput);
todoItemDiv.appendChild(textParagraph);
todoItemDiv.appendChild(deleteButton);

this.todoContainer.appendChild(todoItemDiv);

刪除待辦事項項目

接下來我要添加刪除待辦事項項目的事件處理器。要將事件處理器放在元素添加到 "todoContainer" 之前，這樣才能確保事件被綁定到<button>元素上。

在這裡我會使用removeChild()方法，它和appendChild很相似，只差在removeChild()是將括號內的元素從指定的父元素中刪除。
也就是當我按下"deleteButton"時，就刪除"todoContainer"中的"todoItemDiv"元素。

deleteButton.addEventListener("click", () => {
  this.todoContainer.removeChild(todoItemDiv);
});

以上就是今天的內容，明天我將繼續解決其他JavaScript的細節問題。

參考資料

mdn：Event.preventDefault()
HTML特殊字符編碼